<template>
    <div class="head-body">
        <div  id="index-head">
            <div class="home-head-content">
                <div class="home-login-rig">
                   <router-link to="/login">登录</router-link>
                   <router-link to="/register">注册</router-link>
                </div>
                <div class="home-search">
                    <form method="get">
                        <div class="form-row">
                            <input type="text" class="search-input" name="keyword" placeholder="请输入新闻、公告、法规、办事指南">
                            <button type="submit" class="search-btn">搜索</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="head-nav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <router-link to="/main/index" class="nav-link"  style="color: #fff;font-size: 16px;">首页</router-link>
                </li>
                <li class="nav-item">
                    <router-link to="/main/news" class="nav-link" style="color: #fff;font-size: 16px;">新闻中心</router-link>
                </li>
                <li class="nav-item">
                    <router-link to="/main/notice" class="nav-link" style="color: #fff;font-size: 16px;">通知公告</router-link>
                </li>
                <li class="nav-item">
                  <router-link to="/main/regulations" class="nav-link" style="color: #fff;font-size: 16px;">政策法规</router-link>
                </li>
                <li class="nav-item">
                    <router-link to="/main/assessment" class="nav-link" style="color: #fff;font-size: 16px;">办事指南</router-link>
                </li>
                <li class="nav-item">
                    <router-link to="/main/medicalService" class="nav-link"  style="color: #fff;font-size: 16px;">医疗服务</router-link>
                </li>
                <li class="nav-item">
                    <router-link to="/main/industry_development" class="nav-link"  style="color: #fff;font-size: 16px;">产业发展</router-link>
                </li>
                <li class="nav-item">
                    <a class="nav-link" style="color: #fff;font-size: 16px;">中医文化</a>
                </li>
                <li class="nav-item">
                    <router-link to="/main/menu" class="nav-link"  style="color: #fff;font-size: 16px;">养生保健</router-link>
                </li>
            </ul>
        </div>
    </div>

</template>

<script>
    export default {
        name: "Head"
    }
</script>

<style>
    .head-body{
        padding: 0;
        margin: 0;
    }
    #index-head{
        position: relative;
        margin: 0;
        padding: 0;
        height: 125px;
        width: 100%;
        background-image: url('../../assets/images/u16.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
        border: none;
    }
    .home-head-content{
        position:absolute;
        bottom: 15%;
        right: 20%;
        z-index:3;
        text-align: right;
    }
    .home-head-content a{
        text-decoration: none;
        font-size: 15px;
        font-weight: bold;
        color: #7F7F7F;
        padding: 0 10px;
    }
    .home-search{
        width: 280px;
        margin-top: 10px;
    }
    .form-row{
        display: flex;
    }
    .search-input::-webkit-input-placeholder{
        font-size: 13px!important;
    }
    .search-input::-moz-placeholder{   /* Mozilla Firefox 19+ */
        font-size: 13px!important;
    }
    .search-input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
        font-size: 13px!important;
    }
    .search-input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
        font-size: 13px!important;
    }
    .search-input{
        padding: 0;
        width: 215px;
        height: 30px;
        border: 1px solid #ced4da;
        border-radius: .25rem;
    }
    .search-input:focus{
        background-color: #fff;
        border-color: #775637;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(119, 86, 55, 0.25);
    }
    .search-btn{
        padding: 3px 5px;
        height: 30px;
        position: absolute;
        right: 0;
        background-color: #775637;
        color: #FFFFFF;
        border-radius: .25rem;
    }

    /* 导航栏*/
    ul{
        list-style: none;
    }
    .head-nav{
        background: #775637;
        text-align: center;
        display: flex;
        flex-grow: 1;
    }
    .head-nav ul{
        flex-direction: row;
        display: flex;
        padding: 0;
        margin: 0 auto;
        text-align: center;
        flex-wrap: wrap;
        align-items: center;

    }
    .nav-item{
        height: 60px;
        width: 100px;
        text-align: center;

    }
    .nav-item:hover{
        background-color: #d9001b;
    }
    .nav-link{
        text-decoration: none;
        line-height: 60px;
        text-align: center;
        margin: 0;
        padding: 0;
        width: 100px;
        height: 60px;

    }
</style>